<template>
  <nav class="VPNav" :class="{ 'has-sidebar': hasSidebar }">
    <div class="container">
      <div class="content">
        <div class="content-left">
          <div class="content-left-top">
            <div class="content-left-top-left">
              <a class="VPNavBarMenuLink VPNavBarMenuLink has-icon" href="/" aria-label="Home">
                <svg class="VPNavBarMenuLinkIcon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span class="VPNavBarMenuLinkText">虚谷数据库</span>
              </a>
            </div>
          </div>
        </div>
        
        <div class="content-body">
          <div class="content-body-center">
            <div class="VPNavBarMenuLink VPNavBarMenuLink has-icon VPNavBarMenuLink has-icon">
              <svg class="VPNavBarMenuLinkIcon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              <span class="VPNavBarMenuLinkText">虚谷数据库文档</span>
            </div>
          </div>
        </div>
        
        <div class="content-right">
          <div class="content-right-top">
            <div class="content-right-top-left">
              <!-- 统计数据显示 -->
              <!-- <NavStats /> -->
            </div>
            <div class="content-right-top-center">
              <div class="VPNavBarMenuLink VPNavBarMenuLink has-icon">
                <svg class="VPNavBarMenuLinkIcon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M21 21L16.65 16.65M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span class="VPNavBarMenuLinkText">搜索</span>
              </div>
            </div>
            <div class="content-right-top-right">
              <div class="VPNavBarMenuLink VPNavBarMenuLink has-icon">
                <svg class="VPNavBarMenuLinkIcon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span class="VPNavBarMenuLinkText">菜单</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>
</template>

<script setup>
// import NavStats from './NavStats.vue'

defineProps({
  hasSidebar: {
    type: Boolean,
    default: false
  }
})
</script>

<style scoped>
.VPNav {
  position: relative;
  top: var(--vp-layout-top-height, 0px);
  z-index: var(--vp-z-index-nav);
  width: 100%;
  pointer-events: none;
}

.VPNav.has-sidebar {
  width: var(--vp-sidebar-width);
}

.VPNav .container {
  position: relative;
  margin: 0 auto;
  padding: 0 24px 0 24px;
}

.VPNav .content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--vp-nav-height);
  pointer-events: none;
}

.VPNav .content-left,
.VPNav .content-right {
  display: flex;
  align-items: center;
  pointer-events: auto;
}

.VPNav .content-left {
  flex-shrink: 0;
}

.VPNav .content-left-top {
  display: flex;
  align-items: center;
}

.VPNav .content-left-top-left {
  display: flex;
  align-items: center;
}

.VPNav .content-body {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: var(--vp-nav-height);
  pointer-events: none;
}

.VPNav .content-body-center {
  display: flex;
  align-items: center;
  pointer-events: auto;
}

.VPNav .content-right {
  flex-shrink: 0;
}

.VPNav .content-right-top {
  display: flex;
  align-items: center;
}

.VPNav .content-right-top-left {
  display: flex;
  align-items: center;
}

.VPNav .content-right-top-center {
  display: flex;
  align-items: center;
}

.VPNav .content-right-top-right {
  display: flex;
  align-items: center;
}

.VPNavBarMenuLink {
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: var(--vp-nav-height);
  font-size: 13px;
  font-weight: 500;
  color: var(--vp-c-text-1);
  white-space: nowrap;
  transition: color 0.25s;
  text-decoration: none;
}

.VPNavBarMenuLink:hover {
  color: var(--vp-c-brand);
}

.VPNavBarMenuLink.has-icon {
  padding: 0 8px;
}

.VPNavBarMenuLinkIcon {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

.VPNavBarMenuLinkText {
  line-height: 24px;
}

/* 响应式设计 */
@media (max-width: 960px) {
  .VPNav .content-body {
    position: relative;
    width: auto;
  }
  
  .VPNav .content-body-center {
    display: none;
  }
}

@media (max-width: 768px) {
  .VPNav .container {
    padding: 0 12px 0 12px;
  }
}
</style> 